<!--  -->
<template>
  <div class="broadcast">
    <div class="broadcasttop">
      直播管理
    </div>
    <div class="broadcastbottom">
      <div class="sanji">
        <div class="block">
          直播状态:
          <el-cascader
            v-model="value1"
            :options="options1"
            :show-all-levels="false"
            @change="handleChange"
          ></el-cascader>
        </div>

        <!-- 搜索 -->
        <div class="block">
          经纪人搜索:
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 150px"
          ></el-input>
          <button @click="sou()">搜索</button>
        </div>
      </div>
      <div class="broad">
        <h3>全部直播</h3>
        <div class="zhibo">
          <dl v-for="(item, index) in list" :key="(item, index)">
            <dt><img :src="item.image" alt="" /></dt>
            <dd>
              <h4>{{ item.title }}</h4>
              <span>{{ item.name }}</span> <span>{{ item.time }}</span>
            </dd>
          </dl>
        </div>
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageindex"
            :page-sizes="[12]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: "",
      input: "",
      pageindex: 1,
      pagesize: 12,
      total: 0,
      value1: [],
      options1: [
        {
          value: "开启",
          label: "开启",
        },
        {
          value: "关闭",
          label: "关闭",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getliat();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getliat();
    },
    handleChange(value) {
      console.log(value);
    },
    // 搜索
    sou() {
      axios.get(`/api/searchs?name=${this.input}`).then((res) => {
        console.log(res.data);
        this.list = res.data;
      });
    },
    getliat() {
      axios
        .get("/api/getlist", {
          params: { pageindex: this.pageindex, pagesize: this.pagesize },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getliat();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.broadcast {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
  .broadcasttop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
  }
  .broadcastbottom {
    width: 98%;
    height: 750px;
    background: #fff;
    margin: 0 20px;
    .sanji {
      width: 100%;
      display: flex;
      margin: 10px;
      .block {
        margin: 0 10px;
        button {
          width: 100px;
          height: 40px;
          margin: 0 10px;
          border: none;
          background: skyblue;
          border-radius: 8px;
          color: #fff;
        }
      }
    }
    .broad {
      margin: 10px 20px;
    }
    .zhibo {
      width: 100%;
      height: 90%;
      display: flex;
      margin: 10px 0;
      flex-wrap: wrap;
      dl {
        width: 200px;
        margin: 20px;
        dt img {
          width: 200px;
        }
      }
    }
    .paging {
      margin: 10px 0;
      text-align: right;
      margin-right: 30px;
    }
  }
}
</style>
